<template>
    <div>
        <div class="main max-width">
            <el-card class="max-width" v-for="(item,index) in $data.menus" :key="index">

                <template #header> <span>{{ item.name }}</span> </template>
                <a class="link" @click="urlClick(it)" v-for="(it,_index) in item.menus" :key="_index">
                    <el-tag>{{ it.name }}</el-tag>
                </a>
            </el-card>
        </div>
        <div style="display: flex;">
            <span style="cursor:default" @dblclick="$router.push('/tools')">《@npm_package_description@》</span> 构建于 @BUILD_AT@
        </div>
    </div>
</template>

<script type="text/ecmascript-6" setup>



defineOptions({
    name: "index",
    inheritAttrs: true,
});

//定义 vue2的this,当前组件
const $self = getCurrentInstance();

//定义 $attrs
const $attrs = useAttrs();



//定义data
const $data = reactive({"menus":[]});


const $props = defineProps({

});





const list = ref();

//定义事件
const $emit = defineEmits(["update:modelValue","loaded"]);



const urlClick = function(item) {
    top.jv.$router.push(item.url);
};

onMounted(   function() {
    jv.await(200, 10, () => {
        if (top.jv.main && top.jv.main.menus && top.jv.main.menus.length) {
            $data.menus = top.jv.main.menus;
            return false;
        }
    });
} )



</script>

<style scoped lang="scss">
.main {
    display: grid;
    grid-gap: 20px;
    margin: 20px;
}

@media (min-width: 800px) {
    .main {
        grid-template-columns: repeat(2, 1fr);
    }
}


.main .link {
    margin-right: 10px;
    margin-bottom: 10px;
    display: inline-block;
}
</style>
